<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('swiperManage.轮播图管理')" />
    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'banner:add'">
      <div class="addBtn flex_aic_jcc" @click="handleAdd">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('swiperManage.新增轮播图') }}</span>
      </div>
    </div>
    <div class="mt12" style="height: calc(100% - 200px)" ref="swiperBox">
      <div class="swiperBox w-full">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="0"
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          :autoplay="{ delay: 250000, disableOnInteraction: false }"
          :style="{ width: '100%', height: '500px' }"
        >
          <swiper-slide
            class="swiperSlide w-full h-full flex_aic_jcc"
            v-for="(item, index) in swiperList"
            :key="index"
          >
            <div class="opeater flex_aic">
              <img
                class="edit-icon"
                src="@/assets/images/common/edit.png"
                alt=""
                @click="handleEdit(item)"
                v-my-point="'banner:edit'"
              />
              <el-popconfirm
                :title="$t('swiperManage.确定删除吗')"
                @confirm="handleDelete(item)"
                :confirm-button-text="$t('swiperManage.确定')"
                :cancel-button-text="$t('swiperManage.取消')"
                width="260px"
              >
                <template #reference>
                  <img
                    v-my-point="'banner:del'"
                    class="edit-icon ml15"
                    src="@/assets/images/common/remove.png"
                    alt=""
                  />
                </template>
              </el-popconfirm>
            </div>
            <img class="swiperSlide-img" :src="item.image" alt="" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <EditDia
      v-model="editDiaVisible"
      :data="editDiaData"
      @success="handleSuccess"
    ></EditDia>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import EditDia from "./editDia.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import "swiper/css/autoplay";
import Api from "@/config/api/api";

const { t } = useI18n();
const swiperBox = ref(null);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay];

const swiperList = ref([]);
const handleDelete = (row) => {
  Api.banner_delete([row.id]).then((res) => {
    if (res.status === 200) {
      getSwiperList();
    }
  });
};
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = JSON.parse(JSON.stringify(row));
};
const handleSuccess = () => {
  getSwiperList();
};

const handleAdd = () => {
  editDiaData.value = {};
  editDiaVisible.value = true;
};

const getSwiperList = () => {
  Api.banner_list({
    page: 0,
    size: 999,
  }).then((res) => {
    if (res.status === 200) {
      swiperList.value = res.data?.content || [];
    }
  });
};

onMounted(() => {
  getSwiperList();
});
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(255, 126, 40, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.swiperBox {
  border-radius: 13px;

  .edit-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .swiperSlide {
    position: relative;
    .swiperSlide-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }

    .opeater {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #fff;
      border-radius: 4px;
      padding: 5px 10px;
    }
  }

  .swiperBox-header {
    height: 38px;
    background: #fff;
    border-radius: 13px 13px 0 0;
    background: #ff711e0d;
    box-shadow: 2px 3px 9px #21110e42;
  }
  .swiper {
    background-color: rgb(245, 245, 245);
    .swiper-pagination-bullet-active {
      background-color: #fc7b0c !important;
    }
  }
}
</style>
